<script lang="ts" setup>
import { reactive, ref, toRefs, watch } from "vue"

import {
  getComboDataApi,
  getUserAndRule,
  createOpenUser,
  addRules,
  editRules,
  delRules,
  queryNoSet,
  queryUnder
} from "@/api/combo"
import { type IGetComboData } from "@/api/combo/types/combo"
import { type FormInstance, ElMessage, ElMessageBox } from "element-plus"

import { Search, Refresh, Edit, Delete } from "@element-plus/icons-vue"
import { usePagination } from "@/hooks/usePagination"
import { useUserStore } from "@/store/modules/user"
import { Plus } from "@element-plus/icons-vue"
import { formatDateTime } from "@/utils"
const imageUrl = ref("")
/**地区数据 */
import { useCascaderAreaData } from "@vant/area-data"
const areaoptions = useCascaderAreaData()
defineOptions({
  name: "ComboList"
})
const userStore = useUserStore()
const activeName = ref("shelf")
const fileList = ref<any>([]) /**图片列表 */
const loading = ref<boolean>(false)
const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()

//#region 增
const dialogVisible = ref<boolean>(false)
const formRef = ref<FormInstance | null>(null)
const formData = reactive<any>({
  name: "",
  source: "",
  sku: "",
  message: "",
  note: "",
  image: "",
  card: false,
  minAge: NaN,
  maxAge: NaN,
  area: [],
  state: "true"
})

const resetForm = () => {
  currentUpdateId.value = undefined
  clearValidate()
  formData.name = ""
  formData.source = ""
  formData.sku = ""
  formData.message = ""
  formData.note = ""
  formData.image = ""
  imageUrl.value = ""
  formData.card = false
  formData.area = []
  formData.maxAge = 0
  formData.minAge = 0
  fileList.value = []
  formData.state = "true"
}
//#endregion

//#endregion
const baseURL = "http://8.136.98.140"

const handleUpdate = (row: any) => {
  currentUpdateId.value = row.id
  formData.name = row.name
  formData.source = row.source
  formData.sku = row.sku
  formData.message = row.message
  formData.note = row.note
  formData.card = row.card
  formData.minAge = row.minAge
  formData.maxAge = row.maxAge
  formData.superName = row.superName
  formData.superId = row.superId
  formData.guide = row.guide
  formData.sum = row.sum
  //  formData.imageList = row.imageList
  formData.area = eval(row.area)
  formData.image = row?.image
  fileList.value = row.image?.split(",").map((item: any) => {
    return {
      url: `${baseURL}/image/${item}`
    }
  })

  formData.state = row.state
  dialogVisible.value = true

  // selectedOptions.value = row.takeAddress.split("/")
}
//#region 改
const currentUpdateId = ref<undefined | string>(undefined)

//#endregion

//#region 查
const tableData = ref<IGetComboData[]>([])
const searchFormRef = ref<FormInstance | null>(null)
const searchData = reactive({
  name: "",
  state: "true"
})
const getTableData = () => {
  loading.value = true
  getComboDataApi({
    page: paginationData.currentPage,
    size: paginationData.pageSize,
    state: searchData.state,
    keyword: searchData.name
  })
    .then((res) => {
      paginationData.total = res.data.total
      tableData.value = res.data.list
      console.log(res, "商品")
    })
    .catch(() => {
      tableData.value = []
    })
    .finally(() => {
      loading.value = false
    })
}
const handleSearch = () => {
  if (paginationData.currentPage === 1) {
    getTableData()
  }
  paginationData.currentPage = 1
}
const resetSearch = () => {
  searchFormRef.value?.resetFields()
  if (paginationData.currentPage === 1) {
    getTableData()
  }
  paginationData.currentPage = 1
}

//#endregion
/**不发货地区多选 */
const props = {
  multiple: true,
  checkStrictly: true,
  label: "text",
  value: "text"
}

/**tab 切换 */
const handleClick = (tab: any) => {
  if (tab.paneName === "shelf") {
    searchData.state = "true"
  } else {
    searchData.state = "false"
  }
  getTableData()
}
/** 监听分页参数的变化 */
watch([() => paginationData.currentPage, () => paginationData.pageSize], getTableData, { immediate: true })

// ** 清除规则报错信息
const clearValidate = () => {
  formRef.value?.clearValidate()
}

/**相关配置 */
const dialogVisibleSet = ref<boolean>(false)
const dialogVisibleFXS = ref<boolean>(false)
const dialogVisibleSetYJ = ref<boolean>(false)
const curPackId = ref<any>()
const fxUser = ref<any>([])
const fxUser2 = ref<any>([])
const tableDataA = ref<any>([])
const tableDataA2 = ref<any>([])
const ruleList = ref<any>([]) //佣金规则
const handleSet = (row: any, t: any) => {
  if (t == 1) {
    dialogVisibleSet.value = true
  } else {
    dialogVisibleSetYJ.value = true
  }
  curPackId.value = row.id
  getUserAndRule({ packId: row.id }).then((res: any) => {
    console.log("配置信息", res)
    formDataSet.value.isOpenToSub = res.data.role?.showType
    if (fxUser.value.length || res.data.role?.userIds) {
      fxUser.value = res.data.role.userIds.split(",").map((item: any) => Number(item))
    }
    ruleList.value = res.data.commission
  })
}
const DATA = reactive<any>({
  formDataSet: { isOpenToSub: 0 },
  formSetRef: null
})
const { formDataSet, formSetRef } = toRefs(DATA)
// 获取所有下级
import { getxjzhApi } from "@/api/order/index"

const getXJ = () => {
  getxjzhApi({
    page: 1,
    size: 10000
  }).then((res: any) => {
    tableDataA.value = res.data.list.map((item: any) => {
      return {
        label: item.user_name,
        key: item.user_id,
        initial: item.user_name
      }
    })
  })
}
const restSetForm = () => {
  formSetRef.value?.resetFields()
  fxUser.value = []
  fxUser2.value = []
  ruleList.value = []
  tableDataA.value = []
  tableDataA2.value = []
}
const selectUserEffect = () => {
  getXJ()
  dialogVisibleFXS.value = true
}
const curRoleObj = ref<any>(null)
const selectUserEffect2 = (row: any) => {
  curRoleObj.value = row
  console.log(row, 1)
  if (row.userIds) {
    fxUser2.value = row.userIds.split(",").map((item: any) => Number(item))
  }

  queryNoSet({ packageId: curPackId.value, id: row.id }).then((res: any) => {
    tableDataA2.value = res.data.map((item: any) => {
      return {
        label: item.user_name,
        key: item.user_id,
        initial: item.user_name
      }
    })
  })
  dialogVisibleFXS2.value = true
}
const filterMethod = (query: any, item: any) => {
  return item.initial.toLowerCase().includes(query.toLowerCase())
}
const filterMethod2 = (query: any, item: any) => {
  return item.initial.toLowerCase().includes(query.toLowerCase())
}
const changeTran = (value: any) => {
  fxUser.value = value
}
const changeTran2 = (value: any) => {
  fxUser2.value = value
}
/**对部分分销商可见或者不可见时添加 可见或不可见名单 */
const addOpenUser = () => {
  dialogVisibleFXS.value = false
}

/** 佣金规则设置相关*/
const formYjRef = ref<any>(null)
const ruleTxt = ref<any>(null)
const dlgYj = ref<boolean>(false)
const tittleYj = ref<String>("新增佣金规则")
const data = reactive<any>({
  formDataYj: {},
  rulesRole: {
    ruleName: [{ required: true, trigger: "blur", message: "请输入" }]
  }
})
const checkedAct = ref<boolean>(false) // 已激活复选
const checked1st = ref<boolean>(false) // 已首充复选
const checkedTotal = ref<boolean>(false) // 累计充值复选
const restYj = () => {
  formDataYj.value = {}
  checkedAct.value = false
  checked1st.value = false
  checkedTotal.value = false
  actChange(false)
  firstChange(false)
  totalChange(false)
}
const addYjRule = () => {
  tittleYj.value = "新增佣金规则"
  dlgYj.value = true
  curRuleId.value = undefined
  formData.timingRule = ""
}
//已激活复选框change事件
const actChange = (val: any) => {
  if (!val) {
    formDataYj.value.actCommission = ""
  }
}
//已首充发复选框change事件
const firstChange = (val: any) => {
  if (!val) {
    formDataYj.value.firstTopUp1 = ""
    formDataYj.value.firstTopUp2 = ""
    formDataYj.value.firstCommission1 = ""
    formDataYj.value.firstCommission2 = ""
  }
}
//已累计充发复选框change事件
const totalChange = (val: any) => {
  if (!val) {
    formDataYj.value.totalTopUp1 = ""
    formDataYj.value.totalTopUp2 = ""
    formDataYj.value.totalCommission1 = ""
    formDataYj.value.totalCommission2 = ""
  }
}
//佣金规则增删改查
//增改
const curRuleId = ref<any>(undefined)
const { formDataYj, rulesRole } = toRefs(data)
const editRuleBtn = (row: any, id: any) => {
  curRuleId.value = id
  tittleYj.value = "修改佣金规则"
  formDataYj.value = JSON.parse(JSON.stringify(row))
  checkedAct.value = !!(formDataYj.value.actCommission && formDataYj.value.actCommission != 0)
  checked1st.value = !!(
    (formDataYj.value.firstTopUp1 && formDataYj.value.firstTopUp1 != 0) ||
    (formDataYj.value.firstTopUp2 && formDataYj.value.firstTopUp2 != 0)
  )
  checkedTotal.value = !!(
    (formDataYj.value.totalTopUp1 && formDataYj.value.totalTopUp1 != 0) ||
    (formDataYj.value.totalTopUp2 && formDataYj.value.totalTopUp2 != 0)
  )

  dlgYj.value = true
}
const addOrEditRules = () => {
  formYjRef.value?.validate((valid: boolean) => {
    if (valid) {
      if (!formDataYj.value.yjDesc) {
        formDataYj.value.yjDesc = ""
      }
      if (curRuleId.value) {
        editRules({
          id: curRuleId.value,
          commissionRuleJson: JSON.stringify(formDataYj.value),
          packageId: curPackId.value,
          executeTime: formDataYj.value.executeTime,
          commissionRule: `${formDataYj.value.ruleName}${formDataYj.value.yjDesc}${ruleTxt.value.textContent}`
        }).then((res: any) => {
          // console.log(res)
          if (res.code === 200) {
            ElMessage.success("修改成功")
            dlgYj.value = false
            handleSet({ id: curPackId.value }, 0)
          }
        })
      } else {
        addRules({
          commissionRuleJson: JSON.stringify(formDataYj.value),
          packageId: curPackId.value,
          executeTime: formDataYj.value.executeTime,
          commissionRule: `${formDataYj.value.ruleName}${formDataYj.value.yjDesc}${ruleTxt.value.textContent}`
        }).then((res: any) => {
          if (res.code === 200) {
            ElMessage.success("添加成功")
            dlgYj.value = false
            handleSet({ id: curPackId.value }, 0)
          }
        })
      }
    }
  })
}
//规则删除
const delRuleBtn = (row: any) => {
  console.log(row, 199)
  ElMessageBox.confirm(`正在删除：【${row.commissionRule}】，确认删除？`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    delRules(row.id).then(() => {
      ElMessage.success("删除成功")
      handleSet({ id: curPackId.value }, 0)
    })
  })
}

/**为分销商指定规则 */
const dialogVisibleFxsYj = ref<boolean>(false)
const dialogVisibleFXS2 = ref<boolean>(false)
const setRoleForUser = () => {
  dialogVisibleFxsYj.value = true
}

const addOpenUser2 = () => {
  // if (fxUser2.value.length) {
  editRules({
    id: curRoleObj.value.id,
    commissionRuleJson: curRoleObj.value.commissionRuleJson,
    packageId: curPackId.value,
    commissionRule: curRoleObj.value.commissionRule,
    executeTime: new Date(curRoleObj.value.executeTime),
    userIds: fxUser2.value.join() || null
  }).then((res: any) => {
    // console.log(res)
    if (res.code === 200) {
      ElMessage.success("成功")
      dialogVisibleFXS2.value = false
      handleSet({ id: curPackId.value }, 0)
    }
  })
  // }
}
const restSetFormFXSYj = () => {
  console.log(2)
}
const setUerIsOpenAndRole = async () => {
  await createOpenUser({
    showType: formDataSet.value.isOpenToSub,
    packageId: curPackId.value,
    userIds: fxUser.value.join() || null
  })

  dialogVisibleSet.value = false
}
/**查看下级佣金变更记录 */
const dialogVisibleUnder = ref<boolean>(false)
const tableDataUnder = ref<any>([])
const handleUnderInfo = (row: any) => {
  tableDataUnder.value = []
  dialogVisibleUnder.value = true
  queryUnder({ userId: userStore.userInfo.user_id, packId: row.id })
    .then((res: any) => {
      if (res.code == 200) {
        console.log("佣金变更记录", res)
        tableDataUnder.value = res.data
      }
    })
    .finally(() => {
      loading.value = false
    })
}
/**END */
</script>

<template>
  <div class="app-container">
    <el-card v-loading="loading" shadow="never" class="search-wrapper">
      <el-form ref="searchFormRef" :inline="true" :model="searchData">
        <el-form-item prop="name" label="产品名">
          <el-input v-model="searchData.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
          <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card v-loading="loading" shadow="never">
      <div class="table-wrapper">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="在售产品" name="shelf" />
          <el-tab-pane label="已下架产品" name="offShelf" />
        </el-tabs>
        <el-table :data="tableData">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column prop="id" label="ID" align="center" />
          <el-table-column prop="image" label="产品主图" align="center">
            <template #default="scope">
              <img :src="`${baseURL}/image/${scope.row.imageList.split(',')[0]}`" alt="" width="80" height="80" />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="产品名" align="center" />
          <!-- <el-table-column prop="message" label="产品详情" align="center" show-overflow-tooltip /> -->
          <!-- <el-table-column prop="note" label="产品备注" align="center" show-overflow-tooltip /> -->
          <el-table-column prop="date" label="发布时间" align="center">
            <template #default="scope">
              {{ formatDateTime(scope.row.date) }}
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="280">
            <template #default="scope">
              <p>
                <el-button type="primary" text bg size="small" @click="handleUpdate(scope.row)">查看详情</el-button>
              </p>
              <p>
                <el-button type="primary" text bg size="small" @click="handleSet(scope.row, 1)"
                  v-if="userStore.userInfo.user_id != 1 && activeName === 'shelf'">是否对分销商可见</el-button>
              </p>
              <p>
                <el-button type="primary" text bg size="small" @click="handleSet(scope.row, 0)"
                  v-if="userStore.userInfo.user_id != 1 && activeName === 'shelf'">产品佣金设置</el-button>
              </p>
              <p>
                <el-button type="primary" text bg size="small" @click="handleUnderInfo(scope.row)"
                  v-if="userStore.userInfo.user_id != 1 && activeName === 'shelf'">查看下级佣金记录</el-button>
              </p>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pager-wrapper">
        <el-pagination background :layout="paginationData.layout" :page-sizes="paginationData.pageSizes"
          :total="paginationData.total" :page-size="paginationData.pageSize" :currentPage="paginationData.currentPage"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </el-card>
    <!-- 新增/修改 -->
    <el-dialog v-model="dialogVisible" :title="currentUpdateId === undefined ? '新增产品' : '查看产品'" @close="resetForm"
      width="80%">
      <el-form ref="formRef" :model="formData" label-width="100px" label-position="left">
        <el-form-item prop="name" label="产品名">
          <el-input v-model="formData.name" disabled />
        </el-form-item>
        <el-form-item prop="sku" label="产品编码">
          <el-input v-model="formData.sku" disabled />
        </el-form-item>
        <el-form-item prop="message" label="产品详情">
          <div v-html="formData.message" style="height: 300px; width: 100%; overflow-y: auto" class="overflowBpx" />
        </el-form-item>
        <!-- <el-form-item prop="note" label="产品备注">
          <el-input v-model="formData.note" type="textarea" autosize disabled />
        </el-form-item> -->
        <el-form-item prop="sum" label="佣金规则">
          <el-input v-model="formData.sum" disabled />
        </el-form-item>
        <el-form-item prop="card" label="上传身份证">
          <el-select v-model="formData.card" clearable disabled style="width: 240px">
            <el-option :key="1" label="是" :value="true" />
            <el-option :key="2" label="否" :value="false" />
          </el-select>
        </el-form-item>
        <el-form-item prop="age" label="年龄限制" class="ageInput">
          <el-input type="number" disabled v-model="formData.minAge"
            oninput="if(value.length>2)value=value.slice(0, 2)" />
          <span style="display: inline-block; padding: 0 5px">至</span>
          <el-input type="number" disabled v-model="formData.maxAge"
            oninput="if(value.length>2)value=value.slice(0, 2)" />
        </el-form-item>
        <el-form-item prop="area" label="不发货地区">
          <el-cascader size="large" disabled :props="props" :options="areaoptions" v-model="formData.area" />
        </el-form-item>
        <el-form-item prop="guide" label="敏感词">
          <el-input v-model="formData.guide" disabled type="textarea" />
        </el-form-item>
        <!-- <el-form-item prop="team" label="可销售团队">
          <el-select v-model="formData.team" clearable multiple style="width: 240px" disabled>
            <el-option v-for="item in teamList" :key="item.id" :label="item.name" :value="item.name" />
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item
          prop="sum"
          label="佣金规则T1金额"
          v-if="userStore.roles.join() !== '文员' && userStore.roles.join() !== '售后客服'"
        >
          <el-input v-model="formData.sum" disabled />
        </el-form-item> -->
        <el-form-item prop="image" label="产品主图">
          <el-upload :auto-upload="false" :file-list="fileList" :show-file-list="true" list-type="picture-card"
            :limit="1" accept="image/*" disabled>
            <el-icon>
              <Plus />
            </el-icon>
            <template #file="{ file }">
              <div>
                <img class="el-upload-list__item-thumbnail" :src="file.url" />
                <span class="el-upload-list__item-actions" />
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 分销商可见设置 -->
    <el-dialog v-model="dialogVisibleSet" title="分销商可见设置" width="50%" @close="restSetForm">
      <el-form ref="formSetRef" :model="formDataSet" label-width="100px" label-position="left">
        <el-form-item prop="isOpenToSub" label="分销商可见设置">
          <el-radio-group v-model="formDataSet.isOpenToSub" @change="fxUser = []">
            <el-radio :label="0" size="large">仅自己可见</el-radio>
            <el-radio :label="1" size="large">全部分销商可见</el-radio>
            <el-radio :label="2" size="large">选择的分销商可见</el-radio>
            <el-radio :label="3" size="large">选择的分销商不可见</el-radio>
          </el-radio-group>
          <p style="margin: 0" v-if="formDataSet.isOpenToSub != 0 && formDataSet.isOpenToSub != 1">
            已选择{{ fxUser.length }}条 <el-button text type="primary" @click="selectUserEffect">编辑</el-button>
          </p>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="setUerIsOpenAndRole">确认</el-button>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogVisibleSetYJ" title="产品佣金设置" width="50%" @close="restSetForm">
      <el-form ref="formSetRefYJ" :model="formDataSet" label-width="100px" label-position="left">
        <el-form-item prop="sum" label="佣金规则设置">
          <!--          <el-input v-model="formData.sum" placeholder="请输入" />-->
          <!--          佣金规则列表-->
          <div class="bor3" v-for="item of ruleList" :key="item.id">
            <template v-if="ruleList.length">
              <span>{{ item.commissionRule }}</span>
              <el-button type="primary" size="small" :icon="Edit"
                @click="editRuleBtn(JSON.parse(item.commissionRuleJson), item.id)">编辑</el-button>
              <el-button type="danger" size="small" :icon="Delete" @click="delRuleBtn(item)"> 删除 </el-button>
            </template>
          </div>
          <el-button type="primary" @click="addYjRule">新增佣金规则</el-button>
        </el-form-item>
        <el-form-item prop="sum2" label="佣金规则指定">
          <el-button type="primary" @click="setRoleForUser">为分销商指定规则</el-button>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="dialogVisibleSetYJ = false">确认</el-button>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogVisibleFXS" :show-close="false" title="指定分销商" width="50%">
      <el-transfer v-model="fxUser" filterable :filter-method="filterMethod" filter-placeholder="请输入" :data="tableDataA"
        :titles="['下级分销', '已选择']" :right-default-checked="fxUser" @change="changeTran" />
      <template #footer>
        <el-button type="primary" @click="addOpenUser">确认</el-button>
      </template>
    </el-dialog>
    <!--    佣金规则弹窗-->
    <el-dialog v-model="dlgYj" :title="tittleYj" @close="restYj">
      <el-form ref="formYjRef" :model="formDataYj" label-width="100px" :rules="rulesRole" label-position="left">
        <el-form-item prop="ruleName" label="规则名称">
          <el-input v-model="formDataYj.ruleName" placeholder="请输入" />
        </el-form-item>
        <el-form-item prop="yjDesc" label="佣金描述">
          <el-input v-model="formDataYj.yjDesc" placeholder="请输入" />
        </el-form-item>
        <el-form-item prop="dlJl" label="达量奖励" style="display: none">
          <el-input v-model="formDataYj.dlJl" placeholder="请输入" />
        </el-form-item>
        <el-form-item prop="defined" label="规则定义">
          <div class="newcon">
            <div class="newflex">
              <div class="newflexli1" style="padding: 15px 0">满足条件</div>
              <div class="newflexli2" style="padding: 15px 0">支出佣金</div>
            </div>
            <div class="newcon">
              <div class="newflex">
                <div class="newflexli1 newflex2">
                  <div class="newflexli11">
                    <el-checkbox v-model="checkedAct" label="已激活" size="large" @change="actChange" />
                  </div>
                  <div class="newflexli12" />
                </div>
                <div class="newflexli2">
                  <el-input style="width: 60%; margin: 5px 0" :disabled="!checkedAct" type="text"
                    v-model="formDataYj.actCommission" placeholder="请输入" />
                </div>
              </div>
              <div class="newflex">
                <div class="newflexli1 newflex2">
                  <div class="newflexli11">
                    <el-checkbox v-model="checked1st" label="已首充" size="large" @change="firstChange" />
                  </div>
                  <div class="newflexli12">
                    <div>
                      <!--                      首充充值1-->
                      充值≥:
                      <el-input style="width: 60%; margin: 5px 0" :disabled="!checked1st" type="text"
                        v-model="formDataYj.firstTopUp1" placeholder="请输入" />
                    </div>
                    <div>
                      <!--                      首充充值2-->
                      充值≥:
                      <el-input style="width: 60%; margin: 5px 0" :disabled="!checked1st" type="text"
                        v-model="formDataYj.firstTopUp2" placeholder="请输入" />
                    </div>
                  </div>
                </div>
                <div class="newflexli2">
                  <!--                  首充佣金1-->
                  <el-input style="width: 60%; margin: 5px 0" :disabled="!checked1st" type="text"
                    v-model="formDataYj.firstCommission1" placeholder="请输入" />
                  <!--                  首充佣金2-->
                  <el-input style="width: 60%; margin: 5px 0" :disabled="!checked1st" type="text"
                    v-model="formDataYj.firstCommission2" placeholder="请输入" />
                </div>
              </div>
              <div class="newflex">
                <div class="newflexli1 newflex2">
                  <div class="newflexli11">
                    <el-checkbox v-model="checkedTotal" label="累计充值" size="large" @change="totalChange" />
                  </div>
                  <div class="newflexli12">
                    <div>
                      <!--                      累计充值1-->
                      充值≥:
                      <el-input style="width: 60%; margin: 5px 0" :disabled="!checkedTotal" type="text"
                        v-model="formDataYj.totalTopUp1" placeholder="请输入" />
                    </div>
                    <div>
                      <!--                      累计充值2-->
                      充值≥:
                      <el-input style="width: 60%; margin: 5px 0" :disabled="!checkedTotal" type="text"
                        v-model="formDataYj.totalTopUp2" placeholder="请输入" />
                    </div>
                  </div>
                </div>
                <div class="newflexli2">
                  <!--                  累计充值返佣1-->
                  <el-input style="width: 60%; margin: 5px 0" :disabled="!checkedTotal" type="text"
                    v-model="formDataYj.totalCommission1" placeholder="请输入" />
                  <!--                  累计充值返佣2-->
                  <el-input style="width: 60%; margin: 5px 0" :disabled="!checkedTotal" type="text"
                    v-model="formDataYj.totalCommission2" placeholder="请输入" />
                </div>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item prop="executeTime" label="生效时间">
          <el-date-picker v-model="formDataYj.executeTime" type="datetime" />
        </el-form-item>
        <el-form-item label="当前设定规则">
          <p style="margin: 0" ref="ruleTxt">
            <span>{{ formDataYj.yjDesc }}</span>
            <span>{{ formDataYj.dlJl }}</span>
            <span v-if="checkedAct">
              <span v-if="formDataYj.actCommission && formDataYj.actCommission != 0">
                已激活,佣金{{ formDataYj.actCommission }}元.
              </span>
            </span>
            <span v-if="checked1st">
              <span v-if="formDataYj.firstTopUp1 && formDataYj.firstTopUp1 != 0">首充≥{{ formDataYj.firstTopUp1 }}元,佣金{{
                formDataYj.firstCommission1 }}元</span>
              <span v-if="formDataYj.firstTopUp2 && formDataYj.firstTopUp2 != 0">
                首充≥{{ formDataYj.firstTopUp2 }}元,佣金{{ formDataYj.firstCommission2 }}元.</span>
            </span>
            <span v-if="checkedTotal">
              <span v-if="formDataYj.totalTopUp1 && formDataYj.totalTopUp1 != 0">
                累计充值≥{{ formDataYj.totalTopUp1 }}元,佣金{{ formDataYj.totalCommission1 }}元</span>
              <span v-if="formDataYj.totalTopUp2 && formDataYj.totalTopUp2 != 0">
                累计充值≥{{ formDataYj.totalTopUp2 }}元,佣金{{ formDataYj.totalCommission2 }}元.</span>
            </span>
          </p>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dlgYj = false">取消</el-button>
        <el-button type="primary" @click="addOrEditRules">确认</el-button>
      </template>
    </el-dialog>
    <!-- 编辑分销商佣金 -->
    <el-dialog v-model="dialogVisibleFxsYj" :show-close="false" title="编辑分销商佣金" width="50%" @close="restSetFormFXSYj">
      <el-table :data="ruleList">
        <el-table-column prop="id" label="ID" align="center" />
        <el-table-column prop="commissionRule" label="佣金规则" align="center" />
        <el-table-column fixed="right" width="280" align="center">
          <template #default="scope">
            <span>已选择:{{ scope.row?.userIds?.split(",").length || 0 }}条</span><el-button text type="primary"
              @click="selectUserEffect2(scope.row)">管理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 为佣金规则分配指定分销商 -->
    <el-dialog v-model="dialogVisibleFXS2" title="指定分销商" width="50%" @close="fxUser2 = []">
      <el-transfer v-model="fxUser2" filterable :filter-method="filterMethod2" filter-placeholder="请输入"
        :data="tableDataA2" :titles="['下级分销', '已选择']" :right-default-checked="fxUser2" @change="changeTran2" />
      <template #footer>
        <el-button type="primary" @click="addOpenUser2">确认</el-button>
      </template>
    </el-dialog>
    <!-- 佣金变更记录 -->
    <el-dialog v-model="dialogVisibleUnder" title="下级佣金变更记录" width="50%">
      <el-table :data="tableDataUnder">
        <el-table-column prop="id" label="ID" align="center" />
        <el-table-column prop="executeTime" label="生效时间" align="center">
          <template #default="scope">
            {{ formatDateTime(scope.row.executeTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="commissionRule" label="佣金规则" align="center" />
      </el-table>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.search-wrapper {
  margin-bottom: 20px;

  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}

:deep(.el-form-item__content) {
  display: block !important;
}

.toolbar-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.table-wrapper {
  margin-bottom: 20px;
}

.pager-wrapper {
  display: flex;
  justify-content: flex-end;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.ageInput :deep(.el-input) {
  width: 45% !important;
}

:deep(.el-form-item__label) {
  width: 130px !important;
}

:deep(.el-popper) {
  max-width: 50% !important;
}

.overflowBpx {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 0 20px 0 20px;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.newcon {
  border: 1px #eaeaea solid;
  border-bottom: 0;
}

.newflex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  border-bottom: 1px #eaeaea solid;
}

.newflex2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.newflexli1 {
  -webkit-box-flex: 2;
  -ms-flex: 2;
  flex: 2;
}

.newflexli2 {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border-left: 1px #eaeaea solid;
}

.newflexli11 {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  line-height: 36px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.newflexli12 {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border-left: 1px #eaeaea solid;
}

.bor3 {
  width: 100%;
  border: 1px #eaeaea solid;
  background: #eaeaea;
  padding: 10px;
  border-radius: 3px;
  margin-bottom: 10px;
}
</style>
